<link rel="stylesheet" href="/approve/lib/dx/css/bootstrap-datetimepicker.min.css" />
<style>
    .area-select{background-color: #fff;border: 1px solid #dfdfdf;border-bottom: none;border-top-left-radius: 4px;border-top-right-radius: 4px;padding: 20px;}
    .area-select h5,
    .search-wrapper h5{font-weight: normal;font-size: 14px;border-bottom: 1px solid #dfdfdf;margin: 0 0 10px;padding-bottom: 10px;}
    .area-select select{width: 200px;}
    .area-select .street-box{padding-top: 20px;display: none;}
    .search-wrapper{background-color: #fff;border: 1px solid #dfdfdf;border-top: none;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;padding: 0 20px 20px;}
    .search-wrapper .abtn-search{color: #fff;border-radius: 5px;display: inline-block;padding: 0 20px;line-height: 25px;font-size: 12px;background-color: #3186c8;margin-left: 10px;vertical-align: middle;}
    .search-wrapper .area-box{padding: 10px 0 20px;}
    .search-wrapper .search-box input{border-radius: 3px;padding: 0 5px;line-height: 25px;height: 25px;border: 1px solid #dfdfdf;vertical-align: middle;font-size: 12px;}
    .search-data table{width: 610px;text-align: center;border-top: 1px solid #dfdfdf;border-left: 1px solid #dfdfdf;font-size: 12px;margin-top: 20px;}
    .search-data table td{border-bottom: 1px solid #dfdfdf;border-right: 1px solid #dfdfdf;line-height: 30px;}
    .datetimepicker table{font-size: 12px;}
</style>
<div class="welcome">
    <ul class="orgCount count-menu">
        <li>
            <p class="name"><a href="/approve/template/home/welcome/group/group.html">组织</a></p>
            <div>
                <i class="fa fa-heart"></i>
                <a class="count">{{orgCountVo.groupCount || 0}}个</a>
            </div>
        </li>
        <li>
            <p class="name"><a href="/approve/template/home/welcome/volunteer/volunteer.html">志愿者</a></p>
            <div>
                <i class="fa fa-heart"></i>
                <a class="count">{{orgCountVo.volunteerCount || 0}}人</a>
            </div>
        </li>
        <li>
            <p class="name"><a href="/approve/template/home/welcome/activity/activity.html">活动</a></p>
            <div>
                <i class="fa fa-heart"></i>
                <a class="count">{{orgCountVo.activityCount || 0}}次</a>
            </div>
        </li>
        <li>
            <p class="name"><a href="/approve/template/home/welcome/time/time.html">公益时间</a></p>
            <div>
                <i class="fa fa-heart"></i>
                <a class="count">{{orgCountVo.timeCount || 0}}分钟</a>
            </div>
        </li>
    </ul>
    <section class="charts">
        <div class="chart" dx-chart="volunteerChartConfig"></div>
        <div class="chart" dx-chart="activityChartConfig"></div>
        <div class="chart" dx-chart="timeChartConfig"></div>
    </section>
</div>
<script src="/approve/lib/bootstrap-datetimepicker.min.js"></script>
<script>
    $(function(){
        $('.count-menu').on('click','.name a',function(){
            $('.charts').load($(this).attr('href'))
            if(sessionStorage.getItem("selectedCode")){
                sessionStorage.removeItem("selectedCode")
            }
            return false
        })
        $.ajax({
            url : "/approve/index/getConfig",
            data: '',
            headers: {
                'content-type': 'application/json;charset=UTF-8'
            },
            dataType:'json',
            type:'post',
            success:function(data){
                sessionStorage.setItem("areainfo", JSON.stringify(data))
            }
        })
    })
    $.fn.datetimepicker.dates['zh'] = {
        days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
        daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
        daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
        months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
        monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
        meridiem:    ["上午", "下午"],
        //suffix:      ["st", "nd", "rd", "th"],
        today:       "今天"
    }
</script>